<!--
 * @Author: liaoxing
 * @Date: 2022-02-16 16:48:55
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-03 18:18:56
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\views\business\quote\customerQuote.vue
-->
<template>
  <div class="customerQuote">
    <header class="flex-align-center">
      <el-select style="width: 120px" v-model="keyCode" placeholder="请选择" size="mini">
        <el-option
          v-for="item in keyOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-form :inline="true" :model="searchValue" class="demo-form-inline" size="mini">
        <el-form-item>
          <el-input v-model="searchValue.searchData"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryCustomerList()">查询</el-button>
          <el-button @click="searchValue.searchData = ''; queryCustomerList()">重置</el-button>
        </el-form-item>
      </el-form>
    </header>
    <main>
      <el-table
        v-loading="loading"
        :header-cell-style="{backgroundColor: '#F2F6FC'}"
        :data="customerList"
        style="width: 100%">

        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="100">
        </el-table-column>

        <el-table-column
          v-for="item in tableRenderList"
          align="center"
          :key="item.key"
          :prop="item.key"
          :label="item.label"
          :width="item.width || 'auto'">
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <span class="color-blue finger" @click="editQuote(scope.row)">报价编辑</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 20px"
        :current-page.sync="pn"
        :page-size.sync="ps"
        layout="total, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </main>

    <el-dialog v-if="currentItem" :item="currentItem.customerName" width="1400px" :visible.sync="dialogVisible">
        <el-table
        v-loading="dialogLoading"
        :header-cell-style="{backgroundColor: '#F2F6FC'}"
        :data="quotreList"
        border
        style="width: 100%">

        <el-table-column
          label="工段"
          align="center"
          width="200">
          <template slot-scope="scope">
            {{ scope.row.item + '报价' }}
          </template>
        </el-table-column>

        <el-table-column
          label="计算方式"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-select v-model="scope.row.quoteMethod" placeholder="请选择" size="mini" @change="chnageQuoteMethod($event, scope.$index)">
              <el-option
                v-for="item in quoteMethod[scope.row.item]"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          label="报价规则"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-select v-model="scope.row.chargingType" placeholder="请选择" size="mini" @change="changeRule($event, scope.$index)">
              <el-option
                v-for="item in chargingRule"
                :key="item.label + scope.row.item"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="报价"
          style="min-width: 600px"
          >
          <template slot-scope="scope">
            <template v-if="scope.row.chargingRule.type == 'flatPrice'">
              <checkInput class="hiddenInputBorder" :inValue.sync="scope.row.chargingRule.value"
              :prop="{
                type: 'number',
                precision: 4,
                fill: true,
                unit: '元/' + methodUnit[scope.row.quoteMethod],
                placeholder: '',
                integer: false,
                range: [0, 99999999]
              }"
              ></checkInput>
            </template>

            <template v-else>
              <div class="flex-align-center" v-for="(item, index) in scope.row.chargingRule.value" :key="'scope.row.value' + index">
                <div>
                  <el-input-number size="mini" style="width: 150px" controls-position="right" v-model="item.gt" :precision="0" :step="1" :min="index > 0 ? scope.row.chargingRule.value[index - 1].le + 1 : 0" :max="item.le"></el-input-number>
                </div>

                <span style="margin: 0 10px">
                  ＜
                </span>  

                <span>
                  {{ `整板总${methodUnit[quotreList[0].quoteMethod]}数` }}
                </span>

                <span style="margin: 0 10px">
                  ≤
                </span>
                
                <div>
                  <el-input-number size="mini" style="width: 150px" controls-position="right" v-model="item.le" :precision="0" :step="1" :min="item.gt" :max="index == scope.row.chargingRule.value.length - 1 ? 999999999 : scope.row.chargingRule.value[index + 1].gt - 1"></el-input-number>
                </div>

                <checkInput style="width: 150px; margin-left: 10px" :inValue.sync="item.value"
                  :prop="{
                    type: 'number',
                    precision: 4,
                    fill: true,
                    unit: '元/' + methodUnit[scope.row.quoteMethod],
                    placeholder: '',
                    integer: false,
                    range: [0, 99999999]
                  }"
                ></checkInput>

                <span style="margin: 0 10px 0 30px" class="color-blue finger" @click="addQuoteList(scope.row.chargingRule.value, index)">
                  添加
                </span>

                <span class="color-red finger" v-if="scope.row.chargingRule.value.length > 1" @click="deleteQuoteList(scope.row.chargingRule.value, index)">
                  删除
                </span>
              </div>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 40px; margin-top: 20px" class="flex-center">
        <el-button size="mini" style="margin-right: 30px" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkInput from '@/components/checkInput'
export default {
  name: "customerQuote",
  components: { checkInput },
  data () {
    return {
      loading: false,
      dialogLoading: false,
      keyOptions: [
        {label: "客户编码", value: "custNo_like"},
        {label: "客户名称", value: "custName_like"},
        // {label: "客户简称", value: "custShortName"},
        // {label: "销售员", value: "code4"}
      ],
      keyCode: 'custNo_like',
      searchValue: {
        searchData: ''
      },
      tableRenderList: [
        {label: "客户编码", key: "custNo"},
        {label: "客户名称", key: "custName"},
        {label: "客户简称", key: "shortName"},
        {label: "是否报价", key: "quoted"}
        // {label: "客户类别", key: "key4"},
        // {label: "审核人", key: "key5"},
        // {label: "是否有报价", key: "key6"},
        // {label: "审核日期", key: "key7"}
      ],
      customerList: [],
      pn: 1,
      ps: 10,
      totalSize: 0,
      currentItem: null,
      dialogVisible: false,
      quotreList: [],
      // quoteMethod: [
      //   {label: "按点算", value: "按点算"},
      //   {label: "按片算", value: "按片算"}
      // ],
      quoteMethod: {
        SMT: [
          {label: "按件算", value: "byPart"},
          {label: "按点算", value: "byPoint"}
        ],
        DIP: [
          {label: "按件算", value: "byPart"},
          {label: "按点算", value: "byPoint"}
        ],
        TEST: [
          {label: "按小时算", value: "byHour"},
          {label: "按片算", value: "bySlice"}
        ],
        PACK: [
          {label: "按小时算", value: "byHour"},
          {label: "按片算", value: "bySlice"}
        ],
      },
      chargingRule: [
        {label: "统一价格", value: 'flatPrice'},
        {label: "规则计价", value: 'rule'}
      ],
      methodUnit: {
        byPart: "件",
        byPoint: "点",
        byHour: "小时",
        bySlice: "片"
      }
    }
  },
  created () {
    this.queryCustomerList()
  },
  watch: {
    pn () {
      this.queryCustomerList()
    }
  },
  methods: {
    /* 计算方式改变 */
    chnageQuoteMethod (item, index) {
      if (index == 0) {
        this.quotreList[1].quoteMethod = item
        return 
      }
      if (index == 1) {
        this.quotreList[0].quoteMethod = item
      }
    },
    queryCustomerList () {
      this.loading = true
      
      let param = null

      if (this.searchValue.searchData) {
        param = {
          ps: this.ps,
          pn: this.pn,
        }
        param[this.keyCode] = this.searchValue.searchData
      } else {
        param = {
          ps: this.ps,
          pn: this.pn,
        }
      }

      this.$quote.queryCustomerList(param)
        .then(res => {
          this.loading = false
          if (res.code == 200) {
            this.customerList = res.data.rows
            this.totalSize = res.data.total * 1
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
    },
    async editQuote (item) {
      this.dialogVisible = true
      this.dialogLoading = true
      this.currentItem = item
      await this.queryCustomerQuoteInfo(item.id)
    },
    addQuoteList (item, index) {
      item.splice(index + 1, 0, 
        {ge: 0, le: 0, value: ""}
      )
    },
    deleteQuoteList (item, index) {
      item.splice(index, 1)
    },
    changeRule (item, index) {
      if (item == "rule") {
        this.quotreList[index].chargingRule = {type: "rule", value: [{gt: 0, le: 0, value: ""}]}
      } else {
        this.quotreList[index].chargingRule = {type: "flatPrice", value: 0}
      }
      
    },
    /* 获取客户报价信息 */
    queryCustomerQuoteInfo (id) {
      return new Promise(resolve => {
        this.$quote.queryCustomerInfo(id)
        .then(res => {
          if (res.code == 200) {
            if (res.data.length) {
              res.data.forEach(item => {
                item.chargingType = item.chargingRule.type
              })
              this.quotreList = res.data
            } else {
              this.quotreList = [
                { item: "SMT", quoteMethod: "byPart", chargingType: "flatPrice", chargingRule: {type: "flatPrice", value: 0} },
                { item: "DIP", quoteMethod: "byPart", chargingType: "flatPrice", chargingRule: {type: "flatPrice", value: 0} },
                { item: "TEST", quoteMethod: "bySlice", chargingType: "flatPrice", chargingRule: {type: "flatPrice", value: 0} },
                { item: "PACK", quoteMethod: "bySlice", chargingType: "flatPrice", chargingRule: {type: "flatPrice", value: 0} }
              ]
            }
            this.dialogLoading = false
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
      })
    },
    onSubmit () {
      this.dialogLoading = true
      this.quotreList.forEach(item => {
        delete item.chargingType
      })
      
      this.$quote.putCustomerInfo(this.currentItem.id, this.quotreList)
        .then(res => {
          if (res.code == 200) {
            this.dialogLoading = false
            this.dialogVisible = false
            this.$message.success("提交成功！")
            this.queryCustomerList()
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
    }
  }
}
</script>

<style lang="less">
.customerQuote{
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  position: relative;
  background-color: #F3F5FA;
  header{
    height: 50px;
    padding: 0 16px;
    background-color: white;
    .el-form-item--mini.el-form-item{
      margin-bottom: 0;
      margin-left: 16px;
    }
  }
  main{
    margin-top: 16px;
    background-color: white;
    height: calc(100% - 66px);
    box-sizing: border-box;
    padding: 16px;
  }
  .hiddenInputBorder{
    input{
      // border: unset;
      // background-color: unset;
    }
  }
}
</style>